import { RenderTexture } from 'cc';
import { Texture2D } from 'cc';
import { ImageAsset } from 'cc';
import { UITransform } from 'cc';
import { Camera } from 'cc';
import { SpriteFrame } from 'cc';
import { Sprite } from 'cc';
import { Material } from 'cc';
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GamePreview')
export class GamePreview extends Component {

    @property(Camera)
    blurCamera: Camera = null;

    private _mat: Material = null;

    private _rendering: boolean = false;

    private t1: RenderTexture = null;
    private t2: RenderTexture = null;
    private t3: RenderTexture = null;

    @property(Sprite)
    uiSprite: Sprite = null;

    @property(Sprite)
    d3Sprite: Sprite = null;

    @property(Sprite)
    topSprite: Sprite = null;

    private sprite: Sprite = null;

    start() {

        this.blurCamera.enabled = false;

        const sprite = this.node.getComponent(Sprite);
        this.sprite = sprite;
        this._mat = sprite.getRenderMaterial(0);

        console.log("mat is ", this._mat);
    }

    private _showFrame(r: RenderTexture, sprite: Sprite) {
        let frame = new SpriteFrame();
        frame.texture = r;

        sprite.sizeMode = Sprite.SizeMode.CUSTOM;
        sprite.node.getComponent(UITransform).width = r.width / 2;
        sprite.node.getComponent(UITransform).height = r.height / 2;
        sprite.spriteFrame = frame;
    }

    public renderTextures(t1: RenderTexture, t2: RenderTexture, t3: RenderTexture) {
        this.blurCamera.enabled = true;
        this.t1 = t1;
        this.t2 = t2;
        this.t3 = t3;

        this._showFrame(this.t1, this.uiSprite);
        this._showFrame(this.t2, this.d3Sprite);
        this._showFrame(this.t3, this.topSprite);
        this._rendering = true;

        // let blurRenderTexture = new RenderTexture();
        // blurRenderTexture.initialize({
        //     name: "blur",
        //     width: t1.width,
        //     height: t1.height
        // });
        // this.blurCamera.targetTexture = blurRenderTexture;

        // this.scheduleOnce(() => {
        //     let frame = new SpriteFrame();
        //     frame.texture = blurRenderTexture;
        //     this.sprite.spriteFrame = frame;
        // }, 0);

        // this.combineAllRenderTexture();
    }

    private combineAllRenderTexture(): any {
        const capCanvas = document.createElement('canvas');
        let w = this.t1.width, h = this.t1.height;
        capCanvas.width = w;
        capCanvas.height = h;

        // @ts-ignore
        let ctx = capCanvas.getContext('2d');
        let imageData = ctx.createImageData(w, h);

        for (let i = 3; i >= 1; i--) {
            let pixels = this[`t${i}`].readPixels(0, 0);
            for (let j = 0; j < pixels.length; j++) {
                imageData.data[j] = pixels[j];
            }
            ctx.putImageData(imageData, 0, 0);
        }
        ctx.filter = 'blur(10px)';
        ctx.drawImage(capCanvas, 0, 0);

        let finalImageURL = capCanvas.toDataURL('image/png');
        console.log("finalImageURL is ", finalImageURL);
        // const image = new Image();
        // image.src = finalImageURL;
        // image.onload = function () {
        //     const texture = new Texture2D();

        // }
    }

    update() {
        if (this._rendering) {
            // this._mat.setProperty("texture1", this.t1);
            // this._mat.setProperty("texture2", this.t2);
        }
    }
}

